<template>
  <div class="container">
    <div class="main">
      <div class="set">
        <img src="../../../static/appimg/set.png" alt @click="setModal = true" />
      </div>
      <div class="resume">
        <div class="avator">
          <img :src="userInfo.img_url || 'https://file.91haoka.cn/gerenxitong/g3.png'" alt />
        </div>
        <div class="name">
          <div class="store_name">{{userInfo.store_name}}</div>
          <div class="balance">账户余额：{{balance}}元</div>
          <div class="mobile">手机号：{{mobile}}</div>
        </div>
        <!-- 由于h5 微信支付 没申请下来 暂时隐藏支付入口 -->
        <div class="recharge">
          <div class="invest" @click="balanceClick">充值余额</div>
        </div>
      </div>
      <div class="surplus">
        <div class="surplus_left">
          <div class="wait">待打款</div>
          <div class="wait_money">
            <span style="font-size:16px">￥</span>
            {{Payment.wait_money}}
          </div>
          <div class="in_all">总共{{Payment.wait_count}}笔待打款订单</div>
        </div>
        <div class="surplus_right">
          <div class="kickback" @click="commissionClick">
            <span style="margin:0 10px">佣金打款</span>
            <img src="../../../static/appimg/rightyellow.png" alt />
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="order_add">
        <div class="today">
          <span
            style="font-size:16px;color:#E3E8F1;
            position: absolute;right:0;top:10px;
          "
          >|</span>
          <div style="font-size:15px;color:#020C1D;margin-bottom:5px;position:relative">
            {{countInfo.today_order_count}}
            <div class="round">{{countInfo.inc_order_count}}</div>
          </div>
          <div style="color:#787D85;font-size:13px;">今日订单</div>
        </div>
        <div class="accumulate">
          <span style="font-size:16px;color:#E3E8F1;position: absolute;right:0;top:10px;">|</span>
          <div
            style="font-size:15px;color:#020C1D;margin-bottom:5px;"
          >{{countInfo.total_order_count}}</div>
          <div style="color:#787D85;font-size:13px">累计订单</div>
        </div>
        <div class="add">
          <span style="font-size:16px;color:#E3E8F1;position: absolute;right:0;top:10px;">|</span>
          <div style="font-size:15px;color:#020C1D;margin-bottom:5px;position:relative">
            {{countInfo.today_reseller_count}}
            <div class="round">{{countInfo.inc_reseller_count}}</div>
          </div>
          <div style="color:#787D85;font-size:13px">新增分销商</div>
        </div>
        <div class="distributor">
          <div
            style="font-size:15px;color:#020C1D;margin-bottom:5px"
          >{{countInfo.total_reseller_count}}</div>
          <div style="color:#787D85;font-size:13px">累计分销商</div>
        </div>
      </div>
    </div>
    <div class="footer_content">
      <div class="promotion" @click="extendClick(1)">
        <div class="image_left">
          <img src="../../../static/appimg/promotion.png" alt style="width: 30px;height:30px" />
          <div class="text">
            <div style="color:#020C1D;font-size:14px">推广店铺</div>
            <div style="color:#787D85;font-size:11px">发圈快速获客</div>
          </div>
        </div>

        <div class="image_right">
          <img src="../../../static/appimg/right.png" alt style="width: 8px;height:14px" />
        </div>
      </div>
      <div class="promotion" @click="extendClick(2)">
        <div class="image_left">
          <img src="../../../static/appimg/ask.png" alt style="width: 30px;height:30px" />
          <div class="text">
            <div style="color:#020C1D;font-size:14px">邀请分销商</div>
            <div style="color:#787D85;font-size:11px">提升等级获得佣金</div>
          </div>
        </div>

        <div class="image_right">
          <img src="../../../static/appimg/right.png" alt style="width: 8px;height:14px" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer_tabs">
      <footerApp />
    </div>
    <!-- 设置 -->
    <van-popup
      v-model="setModal"
      position="bottom"
      :style="{ height: '20%',padding:'0 15px'}"
      style="background:transparent;"
    >
      <div class="change_mobile" @click="changeClick">更改手机号</div>
      <div class="exit_login" @click="exitClick">退出登录</div>
    </van-popup>
    <!-- 推广店铺海报 -->
    <van-popup
      v-model="posterModal"
      :style="{ height: '72%',padding:'0 15px',borderRadius:'15px'}"
    >
        <canvas999 ref="canvas999"></canvas999>
    </van-popup>
    <!-- 分销商海报 -->
    <van-popup
      v-model="retailModal"
      :style="{ height: '72%',padding:'0 15px',borderRadius:'15px'}"
    >
      <canvas9999 ref="canvas999"></canvas9999>
    </van-popup>
    <van-popup v-model="show5" position="center" style="border-radius: 0.5rem;">
      <div style="padding: 0.6rem 0.3rem; text-align: center; ">
        <div ref="qrCodeUrl" class="qrCodeUrl"></div>
        <!-- <div
          style="margin-top: 0.5rem; font-size: 0.33rem; color: rgb(120, 119, 119);"
          @click="xiazai2"
        >保存</div>-->
      </div>
    </van-popup>
  </div>
</template>
<script>
import footerApp from "@/views/footerApp";
import canvas999 from "../../components/canvas999.vue";
import canvas9999 from "../../components/canvas9999.vue";
var h = document.documentElement.clientWidth / 7.5 + "px";
document.documentElement.style.fontSize = h;
export default {
  components: {
    footerApp,
    canvas999,
    canvas9999
  },
  data() {
    return {
      posterModal: false,
      retailModal: false,
      show5: false,
      setModal: false,
      userInfo: {},
      balance: 0,
      mobile: {},
      Payment: {},
      countInfo: {},
      haibao: "",
      sms_open:0
    };
  },
  created() {
    this.getUserInfo();
    this.getBalance();
    this.getMobile();
    this.getPayment();
    this.getCountInfo();

    axios.get('/api/logo').then((response)=>{
      if (response.data.msg.code == 0) {
        this.sms_open = response.data.data.sms_open
      } else {
        this.$message.error(response.data.msg.info);
      }
    })
  },
  methods: {
    commissionClick() {
      this.$router.push("./commissionMake");
    },
    balanceClick() {
      this.$router.push("./recharge");
    },
    getCountInfo() {
      axios.get("/own/mobile/count/info").then(response => {
        if (response.data.msg.code == 0) {
          this.countInfo = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getPayment() {
      axios.get("/own/commission/money").then(response => {
        if (response.data.msg.code == 0) {
          this.Payment = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getMobile() {
      axios.get("/own/auth/user").then(response => {
        if (response.data.msg.code == 0) {
          this.mobile = response.data.data.mobile;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getBalance() {
      axios.get("/own/gth/balance").then(response => {
        if (response.data.msg.code == 0) {
          this.balance = response.data.data.balance;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    getUserInfo() {
      axios.get("/api/mstore/info").then(response => {
        if (response.data.msg.code == 0) {
          this.userInfo = response.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    exitClick() {
      axios.post("/own/auth/logout").then(response => {
        if (response.data.msg.code == 0) {
          this.$router.push("/login");
          this.$message.success("已退出账号");
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    changeClick() {
      if(this.sms_open == 1){
        this.$router.push("/mine/changeMobile");
      }else{
        vant.Toast('商家未配置短信签名，请联系客服申请短信签名后才可使用该功能');
      }

    },
    extendClick(selectVal) {
      axios.get("/own/poster/info").then(response => {
        if (response.data.msg.code == 0) {
          if (response.data.data != null) {
            this.haibao = response.data.data;
            if (selectVal == 1) {
              this.posterModal = true;
            }
            if (selectVal == 2) {
              this.retailModal = true;
            }
          } else {
            if (selectVal == 1) {
              this.show5 = true;
              this.$nextTick(() => {
                this.creatQrCode(
                  window.location.origin +
                    "/h5/index?shop_id=" +
                    window.btoa(JSON.parse(localStorage.getItem("user")).id)
                );
              });
            }
            if (selectVal == 2) {
              let copyurl = "";
              axios.get("/own/reseller/check-code").then(response => {
                if (response.data.msg.code == 0) {
                  copyurl =
                    window.origin +
                    "/hou/login?" +
                    encodeURIComponent(response.data.data);
                  axios
                    .get("/own/reseller/system/config/get")
                    .then(response => {
                      if (response.data.msg.code == 0) {
                        if (response.data.data.distributor) {
                          copyurl = copyurl + "&true";
                        }
                        console.log(copyurl);
                        this.show5 = true;
                        this.$nextTick(() => {
                          this.creatQrCode(copyurl);
                        });
                      } else {
                        this.$message.error(response.data.msg.info);
                      }
                    });
                } else {
                  this.$message.error(response.data.msg.info);
                }
              });
            }
          }
        } else {
          vant.Toast(response.data.msg.info);
        }
      });
    },
    xiazai2: function() {
      let canvas = this.$refs.qrCodeUrl.childNodes[0];
      let img = canvas.toDataURL("image/jpeg");
      let blob = this.base64ToBlob(img); // 转码
      this.uploadok(blob);
    },
    creatQrCode(url) {
      this.$refs.qrCodeUrl.innerHTML = "";
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: url, // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new window.Blob([uInt8Array], { type: contentType });
    },
    getRandomChar: function(len = 15) {
      var x = "0123456789qwertyuioplkjhgfdsazxcvbnm"; // 需要什么字符这里添加
      var tmp = "";
      var timestamp = new Date().getTime();
      for (var i = 0; i < len; i++) {
        tmp += x.charAt(Math.ceil(Math.random() * 100000000) % x.length);
      }
      return timestamp + tmp;
    },
    uploadok: function(file, who) {
      let name = this.getRandomChar() + ".jpg";
      var that = this;
      axios.post(`/api/qiniu/uploadtoken`, { name: name }).then(response => {
        if (response.data.msg.code == 0) {
          const observer = {
            next(res) {
              console.log(res);
            },
            error(err) {
              console.log(err);
            },
            complete(res) {
              location.href =
                "https://gperson.gantanhaokeji.top/" + res.key + "?attname=";
            }
          };
          const observable = qiniu.upload(
            file,
            name,
            response.data.data.token,
            {},
            {}
          );
          const subscription = observable.subscribe(observer); // 上传开始
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f6f8fb;
}
.main {
  width: 100%;
  height: 295px;
  background-image: url(../../../static/appimg/background.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
  .set {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    img {
      width: 26px;
      height: 26px;
    }
  }
  .resume {
    width: 100%;
    height: 100px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .avator {
      width: 30%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(../../../static/appimg/gradient.png);
      background-repeat: no-repeat;
      background-size: cover;
      img {
        width: 75px;
        height: 75px;
        border-radius: 50%;
      }
    }
    .name {
      width: 40%;
      height: 94px;
      .store_name {
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }
      .mobile {
        font-size: 12px;
        color: #020c1d;
        margin-top: 10px;
      }
      .balance {
        font-size: 12px;
        color: #020c1d;
        margin-top: 10px;
      }
    }
    .recharge {
      visibility: hidden;  // 暂时隐藏
      width: 30%;
      height: 94px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .invest {
        width: 92px;
        height: 35px;
        text-align: center;
        font-size: 14px;
        color: #ff8905;
        line-height: 35px;
        border-radius: 25px;
        background: white;
      }
    }
  }
  .surplus {
    width: 100%;
    height: 100px;
    border-radius: 12px;
    margin-top: 20px;
    background-image: url(../../../static/appimg/payment.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    .surplus_left {
      width: 50%;
      height: 100px;
      padding-left: 12px;
      padding-top: 10px;
      .wait {
        color: white;
        font-size: 15px;
      }
      .wait_money {
        font-size: 25px;
        font-weight: bold;
        color: white;
        margin: 5px 0;
      }
      .in_all {
        font-size: 13px;
        color: white;
      }
    }
    .surplus_right {
      width: 50%;
      height: 100px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 20px;
      .kickback {
        width: 90px;
        height: 34px;
        border-radius: 25px;
        background: white;
        font-size: 13px;
        color: #ff910d;
        display: flex;
        align-items: center;
        img {
          width: 5.72px;
          height: 10.2px;
          margin-top: 2px;
        }
      }
    }
  }
}
.content {
  width: 100%;
  height: 68.5px;
  margin-top: 15px;
  padding: 0 15px;
  .order_add {
    width: 100%;
    height: 72px;
    background: linear-gradient(#ffe6d5 1.561%, #ffffff 39.753%, #ffffff 100%);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .distributor {
      position: relative;
      text-align: center;
      width: 24%;
      height: 45px;
    }
    .accumulate {
      position: relative;
      text-align: center;
      width: 24%;
      height: 45px;
    }
    .add {
      position: relative;
      text-align: center;
      width: 24%;
      height: 45px;
      .round {
        background: #fe3d3d;
        font-size: 9px;
        border-radius: 5px;
        color: white;
        padding: 0 5px;
        position: absolute;
        right: 18px;
        top: -5px;
      }
    }
    .today {
      position: relative;
      text-align: center;
      width: 24%;
      height: 45px;
      .round {
        background: #fe3d3d;
        font-size: 9px;
        border-radius: 5px;
        color: white;
        padding: 0 5px;
        position: absolute;
        right: 18px;
        top: -5px;
      }
    }
  }
}
.footer_content {
  padding: 0 15px;
  width: 100%;
  .promotion {
    margin-top: 15px;
    width: 100%;
    height: 60px;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    .image_left {
      width: 80%;
      display: flex;
      align-items: center;
      padding-left: 15px;
      .text {
        padding-left: 10px;
      }
    }
    .image_right {
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 15px;
    }
  }
}
.footer_tabs {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}
.change_mobile {
  width: 100%;
  height: 45px;
  font-size: 15px;
  text-align: center;
  line-height: 45px;
  background: white;
  border-radius: 10px;
}
.exit_login {
  width: 100%;
  height: 45px;
  font-size: 15px;
  text-align: center;
  line-height: 45px;
  background: white;
  border-radius: 10px;
  margin-top: 10px;
}

</style>
